import React from 'react';
import { Descriptions, message, Button, Image, Form, Input, Checkbox, Divider } from 'antd';
import { connect } from 'umi';
import UploadUtil from '@/components/UploadUtil';
import moment from 'moment';

const currControl = "Edu_Course";
const mockData: any = [];

for (let i = 0; i < 20; i++) {
    mockData.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
    });
}

class CourseEdit extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            datas: {},
            cascaderOption: [],
            contentEditor: '',
            inputValue: [7, 30],
            imageUrl: '',
            imgList: [],
            userArr: [],
            targetKeys: [],
            selectedKeys: [],
            couponDatas: [],
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        const { ParentData } = this.props;
        if (ParentData && ParentData.id) {
            this.getData(ParentData.id);
        }
    }
    getData = (id: number) => {
        const { dispatch } = this.props;
        this.setState({ loading: true });
        if (id) {
            dispatch({
                type: 'Abp/get',
                payload: { id },
                control: currControl,
            }).then(() => {
                var result = this.props.response.result;
                this.setState({ datas: result, loading: false });
                if (result.imageUrl) {
                    this.setState({ imageUrl: UploadUtil.imgServ + result.imageUrl });
                }
                this.formRef.current.setFieldsValue({ model: result });
            });
        }
    }
    onFinish = async (values: any) => {
        var act = "Abp/apprv";
        const { datas } = this.state;
        values.model.id = datas.id;
        this.props.dispatch({
            type: act,
            payload: values.model,
            control: currControl,
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('审核成功！');
                this.props.fetchDatas();
            }
            else {
                message.error('保存错误，请联系管理员');
            }
        });
    }
    render() {
        const { datas, loading, imageUrl } = this.state;

        return (
            <div>
                <Form ref={this.formRef} layout="vertical" onFinish={this.onFinish} >
                <Descriptions title={datas.title} bordered extra={<Button htmlType="submit" loading={loading} type="primary">审核</Button>}>
                    <Descriptions.Item label="副标题" span={2}>{datas.subTitle?datas.subTitle:"-"}</Descriptions.Item>
                    <Descriptions.Item label="上次审核时间" span={2}>{moment(datas.apprvTime).format('YYYY-MM-DD hh:mm:ss')}</Descriptions.Item>
                    <Descriptions.Item label="标签">{datas.tags}</Descriptions.Item>
                    <Descriptions.Item label="豆币">{datas.beans}</Descriptions.Item>
                    <Descriptions.Item label="适合年龄">{datas.minAge}~{datas.maxAge} (天)</Descriptions.Item>
                    <Descriptions.Item label="课程类型">{datas.cType==="common"?"普通":"视频"}</Descriptions.Item>
                    <Descriptions.Item label="图片"><Image width={100} height={60} src={imageUrl} /> </Descriptions.Item>
                    <Descriptions.Item label="概述" span={3}>{datas.summary}</Descriptions.Item>
                    <Descriptions.Item label="内容" span={5}><div dangerouslySetInnerHTML={{__html: datas.contents}} /></Descriptions.Item>
                </Descriptions>
                <Divider />                
                    <Descriptions title="审核内容" bordered>
                        
                        <Descriptions.Item label="审核人" span={2}>
                            <Form.Item
                                name={['model', 'apprver']}
                                style={{marginBottom:0}}
                                rules={[{ required: true, message: "请输入审核人"  }]}>
                                <Input />
                            </Form.Item>
                        </Descriptions.Item>
                        <Descriptions.Item label="审核通过"  span={2}>
                            <Form.Item
                                name={['model', 'isApprv']}
                                valuePropName="checked"
                                style={{marginBottom:0}}>
                                <Checkbox />
                            </Form.Item>
                        </Descriptions.Item>
                        <Descriptions.Item label="审核意见">
                            <Form.Item
                                name={['model', 'apprvContent']}
                                style={{marginBottom:0}}
                                rules={[{ required: true, message: "请输入审核意见" }]}>
                                <Input.TextArea />
                            </Form.Item>
                        </Descriptions.Item>
                    </Descriptions>
                </Form>
            </div>
        )
    }
}
export default connect(({ Abp, Category }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
    Category
}))(CourseEdit);